<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-05-17 22:53:45
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-05-24 00:49:07
 * @FilePath: \demo\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="ax">
    <ul ref="zz">
      <li
        v-for="(item, index) of array"
        :key="index"
        @mouseover="add(index)"
        @mouseout="ee"
      >
        <img :src="item.imgs" alt="" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      array: [
        { imgs: require("./assets/1.jpg") },
        { imgs: require("./assets/2.jpg") },
        { imgs: require("./assets/3.jpg") },
        { imgs: require("./assets/4.jpg") },
        { imgs: require("./assets/5.jpg") },
        { imgs: require("./assets/6.jpg") },
      ],
      wwe: null,
      num: 0,
    };
  },
  mounted() {
    this.xxx();
  },
  methods: {
    add(index) {
      clearInterval(this.wwe);
    },
    ee() {
      this.xxx();
    },
    xxx() {
      let $that = this;
      this.wwe = setInterval(function () {
        $that.num++;
        $that.$refs.zz.style.transform = `rotateY(${$that.num}deg)`;
        if ($that.num == 360) {
          $that.num = 0;
        }
      }, 40);
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  body {
    height: 100%;
  }
}
li {
  list-style: none;
}
.ax {
  height: 100%;
  perspective: 700px;
  ul {
    position: relative;
    height: 200px;
    width: 200px;
    background-color: rgb(9, 164, 175);
    left: 50%;
    top: 40%;
    transition: all 0.3s;
    transform-style: preserve-3d;
    background-image: url("./assets/7.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    li {
      position: absolute;
      width: 250px;
      height: 300px;
      left: 0;
      top: 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
    & li:nth-child(1) {
      line-height: 200px;
      background-color: rgb(224, 31, 31);
      transform: translateZ(300px);
      text-align: center;
      box-shadow: 0px 0px 10px 0px;
    }
    & li:nth-child(2) {
      line-height: 200px;
      background-color: rgb(237, 255, 196);
      text-align: center;
      transform: rotateY(60deg) translateZ(300px);
      transition: all 0.3s;
    }
    & li:nth-child(3) {
      line-height: 200px;
      background-color: rgb(196, 231, 255);
      text-align: center;
      transform: rotateY(120deg) translateZ(300px);
    }
    & li:nth-child(4) {
      line-height: 200px;
      background-color: rgb(255, 196, 237);
      text-align: center;
      transform: rotateY(180deg) translateZ(300px);

      // transform: rotateY(-50deg);
    }
    & li:nth-child(5) {
      line-height: 200px;
      background-color: rgb(196, 248, 255);
      text-align: center;
      transform: rotateY(240deg) translateZ(300px);
      // transform: rotateY(-50deg);
    }
    & li:nth-child(6) {
      line-height: 200px;
      background-color: rgb(255, 208, 196);
      text-align: center;
      transform: rotateY(300deg) translateZ(300px);
      // transform: rotateY(96deg);

      // transform: rotateY(-50deg);
    }
  }
}
</style>